<template>
	<view class="content">
		<view>
			<UAMHeader :title="title"></UAMHeader>
		</view>
		<view class="">
			<text @click="search">搜索</text>
		</view>
		<!-- 榜单列表 -->
		<view class="chart-list">

		  <view v-for="(chart, index) in charts" :key="index"  @tap="handleToList(chart.id)">
			<view class="chart-item">
			  <view class="chart-header">
				<image :src="chart.imgUrl" mode=""></image>
				<text>{{ chart.updateInfo }}</text>
			  </view>
			  
			  <view class="song-list">
				<view v-for="(song, i) in chart.songs" :key="i" class="song-item">
				  <text class="rank">{{ i + 1 }}.</text>
				  <text class="song-name">{{ song.name }}</text>
				  <text class="singer">- {{ song.singer }}</text>
				</view>
			  </view>
			</view>
		  </view>
		  
		</view>
		
	</view>
</template>

<script>
	import { topList } from '../../common/api.js'
	export default {
		data() {
			return {
				charts : [],
				title: 'ssnPlayer'
			}
		},
		onLoad() {
			topList().then((res)=>{
				if(res.length){
					res.forEach((item)=>{
						var chart={title:item.name,id:item.id,updateInfo:item.updateFrequency,songs:[],imgUrl:item.coverImgUrl}
						item.tracks.forEach((song)=>{
							chart.songs.push({name:song.first,singer:song.second})
						})
						this.charts.push(chart)
					})
				}
			});
			setTimeout(()=>{console.log(this.charts)},1000)			
		},
		methods: {
			handleToList(id){
				console.log(id)
				uni.navigateTo({url:'/pages/list/list?listid='+id});
				},
			search(){
				uni.navigateTo({ url:'/pages/search/search'})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.chart-list {margin:0 30rpx;width: 95%;}
	.chart-item {display: flex; margin-bottom: 35rpx;}
	.chart-header {width:212rpx; height:212rpx; margin-right:20rpx; border-radius: 15rpx; overflow: hidden; position: relative;}
	.chart-header image { width:100%; height:100%;}
	.chart-header text{position: absolute; font-size:22rpx; color:white; bottom: 15rpx; left:15rpx;}
	.song-list {flex:1; font-size:24rpx; line-height: 68rpx;}
	.song-list {}
</style>
